Menu-Design Checklist: 17 UX Guidelines選單設計

選單是使用者查詢內容和使用功能的重要工具，但設計不當的選單可能讓使用者感到困惑或難以操作。以下是關於可用導航選單的 17 條指南，幫助您避免常見錯誤，提升使用者體驗。

讓導航可見 (Make Navigation Visible)

1. 在大屏裝置上顯示導航選單

隱藏導航（如使用漢堡選單）在大屏裝置上是不合適的。儘管在小屏裝置上，隱藏導航是平衡內容與空間的無奈選擇，但在桌面端，選單應當始終可見，以方便使用者理解站點的內容範圍和功能。

錯誤示例: 大都會歌劇院網站在桌面端使用漢堡選單，雖然頁面有足夠的空間，但隱藏的導航難以引起使用者注意。

2. 將選單放置在使用者期望的位置

根據使用者習慣，選單應放在預期區域。例如：

• 主導航：網站的頂部，應用程式的左側。

• 輔助導航：主導航之上。

• 區域性導航：桌面端的左側。

• 頁尾選單：頁面底部，用於展示次要資訊如招聘或投資者資訊。

3. 使用對比度高的連結文字顏色

選單連結的顏色需與背景形成明顯對比，便於使用者快速識別。

錯誤示例: Gus Modern 網站的透明導航條在背景輪播圖上幾乎無法辨認。

4. 在大螢幕上避免選單覆蓋整個頁面

在大屏裝置上，展開的選單應避免覆蓋全屏，以免使用者誤以為跳轉到新頁面。

錯誤示例: Ideo 網站的漢堡選單覆蓋全屏，導致短暫的迷失感。

顯示使用者的當前位置 (Communicate the Current Location)

5. 在選單中明確使用者的當前位置

選單應透過視覺線索（如加粗、下劃線或顏色變化）清晰標識當前頁面，以幫助使用者定位。

錯誤示例: Anthropic 網站未清晰標識使用者位置，容易讓直接進入某子頁面的使用者感到迷失。

正確示例: Whirlpool 網站透過麵包屑導航幫助使用者快速定位當前位置。

6. 為相關內容提供區域性導航

對於需要比較相鄰內容或在某一部分執行多工的使用者，區域性導航可以減少他們上下跳轉的操作成本。

正確示例: NYC 規劃部門網站在左側提供區域性導航，便於使用者橫向瀏覽相關內容。

展示可用選項 (Communicate the Available Options)

7. 使用清晰、具體且使用者熟悉的連結標籤

避免使用內部術語或抽象分類，確保標籤語言直觀明瞭。

8. 提高連結標籤的可掃描性

左對齊垂直選單，前置關鍵資訊以縮短使用者閱讀時間。

9. 對於大型網站，在子選單中顯示多個導航層級

在使用者需要多層導航時，使用子選單或序列導航可以提高效率。

正確示例: Toyota 移動端使用序列選單，結合圖片增強資訊引導。

10. 使用視覺線索幫助使用者瀏覽長選單

影象、圖示和顏色可以增強資訊引導，但必須保留清晰的文字標籤以確保可訪問性。

正確示例: Control Voltage 網站透過小圖片增加資訊引導，但圖片簡化設計可以進一步提高效果。

提高選單的操作性 (Make It Easy to Manipulate)

11. 確保選單連結足夠大且易於點選或觸控

避免小而密集的連結設計。

錯誤示例: Teenage Engineering 網站的連結過小且密集，點選困難。

12. 用箭頭或符號明確標示子選單

使用標記區分直接連結頁面的導航項和展開子選單的導航項。

正確示例: Stanford 網站使用插入符號（如箭頭）指示可展開的子選單。

13. 優先使用點選啟用的子選單而非懸停啟用

懸停觸發不適用於觸屏裝置，容易引發意外觸發或取消操作，建議使用點選啟用以確保一致性。

14. 避免多層級級聯選單，改用大型選單或中轉頁

多級級聯選單操作難度大且易出錯。對於多層級結構，建議使用大型選單或引導使用者到中轉頁面。

錯誤示例: R Studio 的多層級下拉選單難以操作且容易失誤。

15. 考慮在長頁面中使用固定選單

在長頁面中，保持選單在視口頂部固定可減少滾動成本，尤其適用於移動端。

16. 最佳化選單操作的物理便捷性

將常用選項放在靠近觸發區域的位置，減少滑鼠或手指移動距離。

17. 避免過於創新或花哨的導航設計

避免為炫酷效果犧牲實用性。使用者更傾向於易用、直觀的傳統選單設計。

錯誤示例: Adobe CXM 網站的點式導航讓使用者難以理解或操作。

雖然偶爾有新型選單設計可以提升使用者體驗（如漢堡選單），但大多數情況下，遵循這些原則可以讓介面更直觀、更易用。透過不斷測試和最佳化，設計出既能滿足使用者需求又符合使用習慣的導航選單，是提高使用者體驗的關鍵。